<template>
<div class="index">
  <navbar></navbar>
  <div class="blank"></div>
  <cart-empty v-show="this.$store.state.cartList.length===0"></cart-empty>
  <cart-item-list :all-checked="allCheck"
                  @checkClick="checkClick"></cart-item-list>

  <div class="blank"></div>
  <submitbar @onCheckBoxChange="onCheckBoxChange"
              ref="submitbar"></submitbar>
  <div class="blank"></div>
  <tabbar></tabbar>
</div>
</template>

<script>
import Tabbar from "@/components/tabbar/tabbar";
import Navbar from "./components/navbar";
import CartItemList from "./components/cartItemList";
import Submitbar from "./components/submitbar";
import CartEmpty from "./components/cartEmpty";
export default {
name: "index",
  components: {CartEmpty, Submitbar, CartItemList, Navbar, Tabbar},
  data(){
  return{
    allCheck:false
  }
  },
  methods:{
    onCheckBoxChange(checked){
      this.allCheck=checked;
    },
    checkClick(){
      let sum=0
      for(let n of this.$store.state.cartList){
        if(n.checked) sum+=n.count*n.price
      }
      this.$refs.submitbar.priceSum=sum*100
    }
  }
}
</script>

<style scoped>
.index{
  width: 100vw;
  min-height: 100vh;
  background-color: #FAFAFA;
}
</style>